<template>
	<view >
		<view class="order_info" v-if="detail && detail.orderInfoList">
			<image :src="detail.orderInfoList.image" mode="aspectFill" class="cover_img"></image>
			<view class="f1">
				<view class="title">{{ detail.orderInfoList.storeName }}</view>
				<view class="time">时间：{{ detail.orderInfoList.activityStartTime }}</view>
				<view class="other_info">
					<view class="tags">
						<view class="">{{ detail.orderInfoList.sku }}</view>
					</view>
					<view class="price">
						<text>￥</text>
						<text class="pirce_val">{{ detail.payPrice || 0 }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="order_detail" v-if="detail">
			<view class="flex a-c" v-for="(v,i) in orderList" :key="i">
				<view class="">{{ v.title }}</view>
				<view class="f1 t-r">{{ v.val }}</view>
			</view>
			<view class="verifyCode">
				<view class="verifyCodeStatus">
					<view class="">核销状态</view>
					<view class="status_val">{{detail.combinationId>0?'已核销':'待核销'}}</view>
				</view>
				<view class="verifyCodeImg">
					<image :src="detail.verifyCode" mode=""></image>
				</view>
			</view>
		</view>
		
		<view style="text-align: center;margin-top: 100rpx;" v-else>
			<image style="width: 200rpx;height: 200rpx;" src="/static/nodata.png"></image>
			<view style="color: #999;text-align: center;">暂无数据</view>
		</view>
		
		<view class="">
			<view class="order_block"></view>
			<view class="order_bottom flex a-s">
				<button class="btn" v-if="detail.status == 2 || detail.refundStatus == 2">删除订单</button>
				<view class="btn blue" v-if="detail&&!detail.paid" @click="toPay(detail)">去付款</view>
				<button class="btn blue" v-if="detail.paid && detail.status == 2&& !detail.isReply"
				@tap="$to(`/pages/mine/evaluate/evaluate?id=${id}`)">评价</button>
				
				<view class="btn gray" v-if="detail.paid && detail.status==1 && detail.refundStatus === 1"
				@click="toDetail(v)">退款中</view>
				<view class="btn gray" v-if="detail.paid && detail.refundStatus === 2"
				@click="toDetail(v)">退款完成</view>
				<view class="btn gray" v-if="detail.paid && detail.status==1 && detail.refundStatus === 0"
				@click="toDetail(v)">待出行</view>
				<button class="btn gray" v-if="detail.paid && detail.status == 2&& detail.isReply">已评价</button>
				
				<!-- <button class="btn blue" v-if="detail.paid && detail.status == 2">评价</button> -->
				<button class="btn blue" v-if="detail.paid && detail.status == 1 && detail.refundStatus === 0 "
				@click="$to(`/pages/mine/refund/refund?id=${id}&orderId=${orderId}`)">申请退款</button>
				<button class="btn gray" v-if="detail.paid && detail.status == 1 && detail.refundStatus === 1" >退款中</button>
				<button class="btn gray" v-if="detail.paid && detail.status == 1 && detail.refundStatus === 2" >退款完成</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detail: null,
				orderInfo: null,
				orderId: '',
				id: '',
			}
		},
		onLoad(e) {
			this.orderId = e.orderId;
			this.id = e.id;
			this.getDetail();
		},
		computed: {
			orderList() {
				const {detail} = this;
				var olist = [];
				if(detail && detail.orderInfoList) {
					var arr = [];
					detail.orderInfoList.joinerList.forEach(v => {
						arr.push(v.studentName);
					});
					olist = [
						{
							title: '订单编号',
							val: detail.orderId || '',
						},
						{
							title: '下单时间',
							val: detail.createTime || '',
						},
						{
							title: '活动时间',
							val: detail.orderInfoList.activityStartTime || '',
						},
						{
							title: '活动地址',
							val: detail.orderInfoList.address || '',
						},
						{
							title: '出行人数',
							val: `${detail.orderInfoList.joinerNumber}人`,
						},
						{
							title: '出行人员',
							val: arr.join('/'),
						}
					]
				}
				return olist
			}
		},
		methods: {
			async getDetail() {
				const res = await this.$api.get(`order/detail/${this.orderId}`);
				if(res.code == 200) {
					var v = res.data;
					this.detail = v;
				}else {
					this.showToast('订单错误');
					setTimeout(v => {
						uni.navigateBack()
					},1500)
				}
			},
			toPay(v) {
				this.$to(`/pages/index/payOrder?orderNo=${this.orderId}&orderId=${this.id}&payPrice=${v.payPrice}`)
			},
			
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F7F7;
	}
	.order_info {
		display: flex;
		align-items: flex-start;
		padding: 20rpx 26rpx 26rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin: 27rpx;
	
		.cover_img {
			width: 200rpx;
			height: 160rpx;
			border-radius: 14rpx;
			margin-right: 16rpx;
			background-color: #F7F7F7;
		}
		.order_name {
			position: absolute;
			font-weight: bold;
			left: 0;
			top: 0;
			background-image: linear-gradient(to right top,#EEC684,#F3DCB2);
			padding: 0 15rpx;
			line-height: 40rpx;
			font-size: 21rpx;
			border-radius: 20rpx 0 20rpx 0;
			color: #1A1A1A;
		}
	
		.f1 {
			flex: 1;
	
			.title {
				width: 420rpx;
				font-size: 30rpx;
				line-height: 30rpx;
				font-weight: bold;
				color: #1A1A1A;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
	
			.time {
				font-size: 24rpx;
				line-height: 24rpx;
				color: #999999;
				padding: 14rpx 0 22rpx;
			}
	
			.other_info {
				display: flex;
				justify-content: space-between;
	
				.tags {
					display: flex;
					align-items: center;
	
					>view {
						font-size: 22rpx;
						line-height: 22rpx;
						padding: 8rpx 12rpx;
						color: #FF8F01;
						background-color: #FFF2E2;
					}
	
					>view:not(:last-child) {
						margin-right: 20rpx;
					}
				}
	
				.price {
					font-size: 24rpx;
					font-weight: bold;
					color: #FF0404;
	
					.pirce_val {
						font-size: 34rpx;
						color: #FF0000;
					}
				}
			}
		}
	}
	.order_detail {
		padding: 20rpx 26rpx 26rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin: 27rpx;
		font-size: 27rpx;
		line-height: 3;
		.t-r {
			color: #999999;
		}
	}
	.order_block {
		display: block;
		height: 160rpx;
	}
	.order_bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: #FFF;
		padding: 20rpx 40rpx;
		height: 100rpx;
		justify-content: flex-end;
		button::after {
			border: none;
		}
		.btn {
			margin: 0;
			padding: 0;
			background-color: #FFF;
			border: 1rpx solid #E6E6E6;
			padding: 0 24rpx;
			line-height: 60rpx;
			text-align: center;
			border-radius: 30rpx;
			font-size: 27rpx;
			margin-left: 40rpx;
		}
		.blue {
			padding: 0 40rpx;
			border: 1rpx solid #2E80FE;
			background-color: #2E80FE;
			color: #FFF;
		}
		.gray {
			padding: 0 40rpx;
			border: 1rpx solid #c5c5c5;
			background-color: #c5c5c5;
			color: #1A1A1A;
		}
	}
	.verifyCode{
		padding: 20rpx 26rpx 26rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 20rpx;
		.verifyCodeStatus{
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			font-weight: bold;
			margin-bottom: 42rpx;
			.status_val{
				font-size: 28rpx;
				font-weight: normal;
				color: #E71313;
			}
		}
		.verifyCodeImg{
			display: flex;
			justify-content: center;
			image{
				width: 332rpx;
				height: 332rpx;
			}
		}
	}
</style>